<template>
  <div id="goodsdetails" >
    <div class="pof">
      <div class="gd-header">
        <span @click="goback"><svg class="lt"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-left.6f6409e"></use></svg></span>
       <h2>{{name}}</h2>
    </div>
    <div class="gd-center">
        <ul class="select">
          <li @click="showpage(index)" ref="shows" key={index} v-for="(item,index) in msg" >{{item}}
            <svg data-v-98a11d7e="" viewBox="0 0 72 32" class="down"  :class="{'down2':index==aa && ison}"><path data-v-98a11d7e="" d="M36 32l36-32h-72z"></path></svg>
            </li>
        </ul>
        <div class="zhezhao" v-if="istrue||istrue1||istrue2"></div>
          <div class="classify" ref="classify" v-if="istrue">
            <ul class="cl-left">
              <li ref="getcount"  v-for="(item,index) in arrList" key={index} @click="getcount(index,item)">
                <p>{{item.name}}</p>
                <span>{{item.count}}</span>
              </li>
            </ul>
            <ul class="cl-right">
              <li v-for="(item,index) in arrget" key={index} @click="changeother(item.id,item)" ref="right">
                <img v-bind:src='item.image_url' alt="">
                <span>{{item.name}}</span>
                <i>{{item.count}}</i>
              </li>
              
            </ul>
          </div>
          <transition name="fade">
          <div class="sorting" ref="sorting" v-if="istrue1">
            <ul>
              <li @click="sortchage(index)" key={index} v-for="(item,index) in sort">
                <i class=""><svg data-v-fd238482="" v-if="index==0" class="pick"><use data-v-fd238482="" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#default"></use></svg>
                  <svg data-v-fd238482="" v-if="index==1"  class="pick"><use data-v-fd238482="" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#distance"></use></svg>
                  <svg data-v-fd238482="" v-if="index==2"  class="pick"><use data-v-fd238482="" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#hot"></use></svg>
                  <svg data-v-fd238482="" v-if="index==3"  class="pick"><use data-v-fd238482="" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#price"></use></svg>
                  <svg data-v-fd238482="" v-if="index==4"  class="pick"><use data-v-fd238482="" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speed"></use></svg>
                  <svg data-v-fd238482="" v-if="index==5"  class="pick"><use data-v-fd238482="" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating"></use></svg>
                </i>
                <p ref="pcolor" :class="{rightcolor:trueok[index]}">{{item}}</p>
                <i v-if="trueok[index]">
                  <svg data-v-fd238482="" class="selected"><use data-v-fd238482="" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use></svg></i>
              </li>
            </ul>
          </div>
          </transition>
          <div class="filter" ref="filter" v-if="istrue2">
              <dl class="distribution">
                <dt>配送方式</dt>
              </dl>
              <dl class="methods">
                <dt>商家属性 (可多选)</dt>
                <dd @click="select" ref="select0">
                  <i v-if="isSelect">品</i>
                   <b v-if="!isSelect"><svg data-v-fd238482="" class="selected"><use data-v-fd238482="" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use></svg></i></b>
                  <span>品牌商家</span>
                </dd>
                <dd @click="select1" ref="select1">
                  <i v-if="isSelect1">新</i>
                  <b v-if="!isSelect1"><svg data-v-fd238482="" class="selected"><use data-v-fd238482="" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use></svg></i></b>
                  <span>新店</span>
                </dd>
              <dd @click="select2" ref="select2">
                  <i v-if="isSelect2">票</i>
                   <b v-if="!isSelect2"><svg data-v-fd238482="" class="selected"><use data-v-fd238482="" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use></svg></i></b>
                  <span>开发票</span>
                </dd>
              <dd @click="select3" ref="select3">
                  <i v-if="isSelect3">付</i>
                   <b v-if="!isSelect3"><svg data-v-fd238482="" class="selected"><use data-v-fd238482="" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use></svg></i></b>
                  <span>在线支付</span>
                </dd>
              </dl>
              <ul class="btn">
                <li @click="empty">清空</li>
                <li @click="confirm">确定<i v-if="sum>0">({{sum}})</i></li>

              </ul>
          </div>
         
      
    </div>
      <div v-if="arr==''" class="empty">
        <i><img src="https://fuss10.elemecdn.com/2/50/8019fbaebac2aaa76e2d9b5e5b407gif.gif" alt=""></i>
      </div>
       </div> 
  <div v-infinite-scroll="loadMore" infinite-scroll-distance="10">
    <ul class="gd-footer" >
      <li v-for="(item,index) in arr" key={index} >
        	 <div class="information">
						<i class="im"><img v-bind:src=item.image_path alt="" /> </i>
						<div class="informatclass">
                <span class="premium" v-if="item.is_premium"></span>
                <h3 class="add">{{item.name}}<span class="node" v-if="item.supports" ></span></h3 >
                <div class="appraise">
                  <span>
                    <div class="rating-wrapper_36aX1_0">
                      <div class="rating-max_1MKzt_0">
                        <svg class="pricea"><use  xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use></svg>
                        <svg class="pricea"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use></svg>
                        <svg class="pricea"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use></svg>
                        <svg class="pricea"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use></svg>
                        <svg class="pricea"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use></svg>
                      </div>
                    </div>
                  </span>
                  <span class="score">{{item.rating}}</span>
                  <span class="order">月销售{{item.recent_order_num}}单</span>
                  <span class="span1 span3" v-if="item.delivery_mode">蜂鸟专送</span>
                </div>
                <div class="send">
                  <ul class="send_left">
                    <li>￥{{item.float_minimum_order_amount}}元起送</li>
                    <li >/{{item.piecewise_agent_fee.description}}
                    </li>  

                  </ul>
                  <ul class="send_right">
                    <li>{{item.distance}}
                    m/</li>
                    <li>{{item.order_lead_time}}
                    分钟</li>
                  </ul>
                </div>
                <div class="activity" ref="activity" :class="{ 'new1': item.activities.length>1, 'new2': item.activities.length==1 }">
                  <span @click="changeH(index)" v-if="item.activities.length>2">{{item.activities.length}}个活动</span>
                  <div class="new" v-for="(data,num) in item.activities" key={num}><i>{{data.icon_name}}</i><p>{{data.description}}</p></div>
               </div>
						</div>
					 </div>
        </li>
    </ul>  
  </div>
     <transition name="scroll">
      <div  class="scrolltop" ref="scroll" v-if="isScroll"  @click="gotop">
        <svg class="BackTop-icon_2Js4K94"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#back-top.7a234e5"></use></svg>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'goodsdetails',
  data () {
    return {
      name:'下午茶',
      msg:['分类','排序','筛选'],
      sort:['智能排序','距离最近','销量最高','起送价最低','配送速度最快','评分最高'],
      istrue:false,
      istrue1:false,
      istrue2:false,
      id:245,
      arr:[],
      aa:0,
      isOk:false,
      isSelect:true,
      isSelect1:true,
      isSelect2:true,
      isSelect3:true,
      arrList:[],
      arrget:[],
      sum:0,
      page:0,
      isScroll:false,
      trueok:[false,false,false,false,false,false],
      ison:false
    }
  },
  methods:{
    //返回
    goback(){
      this.$router.go(-1)
    },
    //回到顶部
 gotop(){  
     document.documentElement.scrollTop=0
      document.body.scrollTop= 0
 },
    //切换上面3个按键
   showpage (data){
          this.aa = data
          this.ison = true
         this.$refs['shows'][0].className='';
         this.$refs['shows'][1].className='';
        this.$refs['shows'][2].className='';
      if(data==0){
        this.istrue=!this.istrue;
        if(this.istrue){
          this.$refs['shows'][0].className='liselect';
          this.istrue1=false;
          this.istrue2=false;
        }
      }else if(data==1){
        this.istrue1=!this.istrue1;
          if(this.istrue1){
            this.$refs['shows'][1].className='liselect';
            this.istrue=false;
            this.istrue2=false;
          }
      }else if(data==2){
        this.istrue2=!this.istrue2;
          if(this.istrue2){
            this.$refs['shows'][2].className='liselect';
             this.istrue1=false;
             this.istrue=false;
          }
      }
    },
  //改变活动高度
    changeH (a){
      if(!this.Ok){
        this.$refs['activity'][a].style.height=100+'%';
         this.Ok=!this.Ok
      }else{
         this.$refs['activity'][a].style.height=51+'px';
         this.Ok=!this.Ok
      }
    },
    //下拉刷新
    loadMore(){
      var that=this;
      this.page+=20;
      this.$ajax.get('http://localhost:3000/goodsdetails?page='+this.page+'id='+this.id).then(function(res){
        var data = res.data;
         for(var i=0;i<res.data.length;i++){
                  var str=res.data[i].image_path.substr(-4);
                  if(str=='jpeg'){
                  data[i].image_path='https://fuss10.elemecdn.com/'+ res.data[i].image_path+'.jpeg?imageMogr/format/webp/thumbnail/!120x120r/gravity/Center/crop/120x120/'
                  }else{
                    data[i].image_path='https://fuss10.elemecdn.com/'+res.data[i].image_path
                    +'.png?imageMogr/format/webp/thumbnail/!120x120r/gravity/Center/crop/120x120/'
                  }
        }            
        that.arr = that.arr.concat(data) 
      },function(error){
        console.log(error)
      })
    },
    //过滤数据
    sortchage (data){
      var arr1=this.arr;
      this.trueok[0]=this.trueok[1]=this.trueok[2]= this.trueok[3]= this.trueok[4]= this.trueok[5]=false;
      this.trueok[data]=true;
      for(var i=0;i<arr1.length;i++){
        for(var j=0;j<arr1.length-1-i;j++){
          if(data==0){
          }else if(data==1){
             if(arr1[j].distance>arr1[j+1].distance)
              {
              var arr2=arr1[j];
              arr1[j]=arr1[j+1];
              arr1[j+1]=arr2;
            }
          }else if( data==2){
             if(arr1[j].recent_order_num<arr1[j+1].recent_order_num)
              {
              var arr2=arr1[j];
              arr1[j]=arr1[j+1];
              arr1[j+1]=arr2;
        
            }
          }else if( data==3){
             if(arr1[j].float_minimum_order_amount>arr1[j+1].float_minimum_order_amount)
              {
              var arr2=arr1[j];
              arr1[j]=arr1[j+1];
              arr1[j+1]=arr2;
            
            }
          }else if( data==4){
             if(arr1[j].order_lead_time>arr1[j+1].order_lead_time)
              {
              var arr2=arr1[j];
              arr1[j]=arr1[j+1];
              arr1[j+1]=arr2;
            }
          }else if( data==5){
             if(arr1[j].rating<arr1[j+1].rating)
              {
              var arr2=arr1[j];
              arr1[j]=arr1[j+1];
              arr1[j+1]=arr2;
            }
          }   
        }
      }   
      this.arr=arr1;
       this.istrue1=false;
    },
   // 获取左边点击数据
    getcount(data,a){
      for(var i=0;i<this.arrList.length;i++){
        this.$refs['getcount'][i].className = '';
      }
      console.log(data)
      this.$refs['getcount'][data].className = 'select3';
      if(data==0){
         this.arrget=[];
         this.arr=this.arr;
         this.istrue=false;
         this.msg[0]=a.name;
      }else{
         this.arrget=this.arrList[data].sub_categories;
        for(var i=0;i<this.arrget.length;i++){
          var str=this.arrget[i].image_url.substr(-4);
          if(str=='jpeg'){    
          this.arrget[i].image_url='https://fuss10.elemecdn.com/'+ this.arrget[i].image_url+'.jpeg?imageMogr/format/webp/thumbnail/!80x80r/gravity/Center/crop/80x80/'
          }else{
             var str2=this.arrget[i].image_url.substr(0,5);
            if(str2=='https'){  
              this.arrget[i].image_url=this.arrget[i].image_url+'.jpeg?imageMogr/format/webp/thumbnail/!80x80r/gravity/Center/crop/80x80/'
            }else{
                this.arrget[i].image_url='https://fuss10.elemecdn.com/'+this.arrget[i].image_url
               +'.png?imageMogr/format/webp/thumbnail/!80x80r/gravity/Center/crop/80x80/'
            }
            
          }
        }
      }
     
    },
    //跳转筛选页面
    changeother(num,item){
         var that=this;
         this.istrue=false;
        //  this.msg[0]=item.name; 
         this.id=num;
          this.$ajax.get(' http://localhost:3000/goodsdetails?id='+that.id+'page='+that.page).then(function(res){
          that.arr = res.data;
          for(var i=0;i<res.data.length;i++){
            var str=res.data[i].image_path.substr(-4);
            if(str=='jpeg'){
               var str2=res.data[i].image_path.substr(0,5);
                if(str2=='https'){  
                 that.arr[i].image_path= res.data[i].image_path+'.jpeg?imageMogr/format/webp/thumbnail/!120x120r/gravity/Center/crop/120x120/'
                }else{
                   that.arr[i].image_path='https://fuss10.elemecdn.com/'+ res.data[i].image_path
                  +'.jpeg?imageMogr/format/webp/thumbnail/!120x120r/gravity/Center/crop/120x120/'
                }
            }else{
              that.arr[i].image_path='https://fuss10.elemecdn.com/'+res.data[i].image_path
              +'.png?imageMogr/format/webp/thumbnail/!120x120r/gravity/Center/crop/120x120/'
            }
         }
      },function(error){
      console.log(error)
     })
   },
    select(){
        if( this.isSelect){
          this.$refs['select0'].className ='select2';
          this.sum++;
        }else{
          this.$refs['select0'].className = '';
          this.sum--;
        }
        this.isSelect=!this.isSelect;
     
    },
    select1(){
         if( this.isSelect1){
          this.$refs['select1'].className = 'select2';
          this.sum++;
        }else{
          this.$refs['select1'].className = '';
          this.sum--;
        }
        this.isSelect1=!this.isSelect1;
    },
    select2(){
          if( this.isSelect2){
          this.$refs['select2'].className = 'select2';
          this.sum++;
        }else{
          this.$refs['select2'].className = '';
          this.sum--;
        }
        this.isSelect2=!this.isSelect2;

    },
    select3(){
           if( this.isSelect3){
          this.$refs['select3'].className = 'select2';
          this.sum++;
        }else{
          this.$refs['select3'].className = '';
          this.sum--;
        }
        this.isSelect3=!this.isSelect3;
    },
//筛选清空
  empty(){
    this.sum=0;
    this.$refs['select0'].className ='';
    this.$refs['select1'].className ='';
    this.$refs['select2'].className ='';
    this.$refs['select3'].className ='';
  this.isSelect=this.isSelect1=this.isSelect2=this.isSelect3=true;
    
  },
//筛选提交按钮
  confirm(){
      if(sessionStorage.getItem('arr')){
        var arr=sessionStorage.getItem('arr');
         var conarr=JSON.parse(arr);
         this.arr=conarr;
      }else{
       var conarr=this.arr;
      }
     if(!this.isSelect){
        conarr=[];
        for(var i=0;i<this.arr.length;i++){
          if(this.arr[i].is_premium){
              conarr.push(this.arr[i]);  
          }
        } 
      }  
     this.arr=conarr;
    if(!this.isSelect1){
       conarr=[];
      for(var i=0;i<this.arr.length;i++){
          if(this.arr[i].delivery_mode){
              conarr.push(this.arr[i]);
          }
        }
     }
     
     this.arr=conarr;
    if(!this.isSelect2){
       conarr=[];
      for(var i=0;i<this.arr.length;i++){
          if(this.arr[i].supports.description){
              conarr.push(this.arr[i]);
          }
        }
    }
     this.arr=conarr; 
    this.istrue2=false;
    // this.isSelect=this.isSelect1=this.isSelect2=this.isSelect3=true;
}
},
   mounted: function(){
     var that=this;
     //请求页面数据
        this.name=this.$route.query.name;
        this.id=this.$route.query.id;
        console.log(this.id)
              this.$ajax.get('http://localhost:3000/goodsdetails?id='+that.id)
              .then(function(res) {
                that.arr=res.data;                  
                for(var i=0;i<res.data.length;i++){
                  var str=res.data[i].image_path.substr(-4);
                  if(str=='jpeg'){
                  that.arr[i].image_path='https://fuss10.elemecdn.com/'+ res.data[i].image_path+'.jpeg?imageMogr/format/webp/thumbnail/!120x120r/gravity/Center/crop/120x120/'
                  }else{
                    that.arr[i].image_path='https://fuss10.elemecdn.com/'+res.data[i].image_path
                    +'.png?imageMogr/format/webp/thumbnail/!120x120r/gravity/Center/crop/120x120/'
                  }
              }
              sessionStorage.setItem('arr', JSON.stringify(that.arr));
              that.arr=JSON.parse(sessionStorage.getItem('arr'));
            }).catch(function(err) {
              // that.arr=err;
          })
    //按键1左边数据
    //  if(sessionStorage.getItem('arrList')){
    //     var arr3=sessionStorage.getItem('arrList');
    //     this.arr=JSON.parse(arr3);
    //     }else{  
          this.$ajax.get(' http://localhost:3000/goodsdetails/left').then(function(res){
            var data = res.data;
            if(data){
            that.arrList = data;  
            sessionStorage.setItem('arrList', JSON.stringify(that.arrList));  
            }
            },function(error){
            console.log(error)
          })
          // }
          //回到顶部
      var _this = this;
    window.onscroll = function(){
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      if(scrollTop >=300){
         scrollTop =0;
        _this.isScroll = true;
      }else{
        _this.isScroll = false;
      }
    }
  }
 }
</script>

<style scoped>
@import  '../assets/css/goodsdetails.css'
</style>
